<template>
    <rx-layout>
        <template v-slot:center>
            <div class="Transfer-center">
                <div style="margin-bottom: 0.5rem">
                    <div style="margin-bottom: 0.25rem" class="bpm-REQUIRED">{{ i18n('personSign','加签人员') }}:</div>
                    <RxVueUserDialog style="margin-top: 15px" v-model="ccUserIds" :organization="true"></RxVueUserDialog>
                </div>
                <div style="margin-bottom: 0.5rem">
                    <div style="margin-bottom: 0.25rem" class="bpm-REQUIRED">{{ i18n('message', '消息') }}:</div>
                    <textarea class="Transfer-textarea" v-model="opinion" :placeholder="i18n('message','消息','input')" />
                </div>

                <div style="margin-bottom: 0.5rem">
                    <div style="margin-bottom: 0.25rem">{{ i18n('notifyMethod', '通知方式') }}:</div>
                    <checkbox-group @change="checkboxChange">
                        <label style="margin-right:0.5rem" v-for="(item, index) in msgOptions" :key="index">
                            <checkbox :value="item.type"/>
                            <span>{{ item.name }}</span>
                        </label>
                    </checkbox-group>
                </div>
            </div>
        </template>
        <template v-slot:footer>
            <div class="bpm-footer">
                <div @click="closeWindow" class="bpm-footer-close">{{ $ti18('rxForm.cancelBtn', '取消') }}</div>
                <div @click="onOk" class="bpm-footer-ok">{{ $ti18('rxForm.okBtn', '确定') }}</div>
            </div>
        </template>
    </rx-layout>
</template>

<script>
import RxLayout from '@/components/RxLayout'
import RxVueUserDialog from '@/components/RxVueUserDialog';
import BpmtaskApi from '@/api/rxBpm/bpmTask'
import BpmPublicApi from '@/api/rxBpm/BpmPublicApi'

export default {
    name: "BpmTaskSign",
    data() {
        return {
            bpmTask: {},
            destNodeUserList: [],
            isReachEndEvent: false,
            taskConfig: {},
            isMulti:false,
            showUserPop: false,
            opinion: "",
            //目标节点
            destNodeId: "",
            //选中的的rxboxs实例，用于传递数据。
            nodeUserVm: {},
            nodeGroupVm: {},
            files: "[]",
            ccUserIds:[],
            canReject:false,
            msgOptions:[],
            msgTypes:[],
            bpmTaskDetail:{},
            taskId:""
        }
    },
    components: {
        RxLayout,
        RxVueUserDialog
    },
    onLoad(option) {
        let optionData = JSON.parse(option.data);
        this.taskId = optionData.taskId;
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmLang", key);
        },
        init() {
            this.initMessageHandler();
        },
        checkboxChange(e){
            this.msgTypes = e.detail.value
        },
        //通知方式
        initMessageHandler(){
            BpmPublicApi.getMessageHandler().then(res => {
                this.msgOptions=res
            })
        },
        /**
         * 获取用户。
         * @returns {string}
         */
        getUserIds() {
            let accounts = [];
            if (this.ccUserIds && this.ccUserIds.length > 0) {
                this.ccUserIds.forEach(item => {
                    accounts.push(item.id);
                })
            }
            return accounts.join(",");
        },
        onOk() {
            let self = this;
            if(this.opinion ==''){
                uni.showToast({
                    title: this.i18n('message','输入消息','input'), // 消息内容
                    duration: 2000, // 持续时间（单位：毫秒）
                    icon: 'none' // 图标类型（可选值：success/loading/none）
                });
                return
            }
            if(!this.ccUserIds){
                uni.showToast({
                    title: this.i18n('personSign','请选择加签人员','select'), // 消息内容
                    duration: 2000, // 持续时间（单位：毫秒）
                    icon: 'none' // 图标类型（可选值：success/loading/none）
                });
                return
            }
            var noticeTypes=this.msgTypes?this.msgTypes.toString(","):"";
            let cmd = {
                msgTypes: noticeTypes,
                opinion: this.opinion,
                taskId: this.taskId,
                toUserIds:this.getUserIds(),
            }
            uni.showLoading({ title: this.i18n('signing','正在加签中...')});
            BpmtaskApi.addSignUser(cmd).then(res => {
                uni.hideLoading()
                if(res.success){
                    uni.showToast({
                        title: self.i18n('signSuccess', '加签成功'), // 消息内容
                        duration: 2000, // 持续时间（单位：毫秒）
                        icon: 'none' // 图标类型（可选值：success/loading/none）
                    });
                    uni.navigateBack({
                        delta: 3
                    })
                }else{
                    uni.showToast({
                        title: res.message, // 消息内容
                        duration: 2000, // 持续时间（单位：毫秒）
                        icon: 'none' // 图标类型（可选值：success/loading/none）
                    });
                }
            })
        },
        closeWindow() {
            uni.navigateBack({
                delta: 1
            })
        },
    }
}
</script>

<style scoped>
.Transfer-center{
    background: white;
    border-radius: 5px;
    padding: 0.5rem;
}
.Transfer-textarea {
    font-size: 0.8rem;
    height: 124px;
    width: calc(100% - 1rem) !important;
    margin-top: 15px;
    border-radius: 8px;
    border: 1px solid rgba(232, 232, 232, 1);
    padding: 10px 10px 10px 10px;
}
.Transfer-number{
    border-radius: 8px;
    border: 1px solid rgba(232, 232, 232, 1);
    width: 4rem;
    padding: 0px 0.5rem;
    margin-top: 0.25rem;
    margin-right: 0.25rem;
}
.bpm-footer {
    display: flex;
    grid-gap: 10px;
}

.bpm-footer-close {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.65);
}

.bpm-footer-ok {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(66, 133, 244, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: white;
}
.bpm-REQUIRED::after{
    content:'*';
    color: red;
    position: absolute;
    left: 0.7rem;
}
</style>
